<template>
    <div class="loadmore panel panel-default">
        <div class="panel-body">
                <a v-if="show_text" @click="load">加载更多</a>
                <a v-else>没有更多了╰(￣▽￣)╭</a>
                <img v-if="show" src="../assets/imgs/loading.gif" alt="loading">
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                show_text: true,
                show: false
            }
        },
        methods: {
            load() {
                this.show = true
                this.$parent.fetchArticles()
            }
        },
        created() {
            var _this = this
            $(window).scroll(function() {
                if ($(document).height() == $(this).scrollTop() + $(this).height()) {
                    setTimeout(function() {
                        _this.load()
                    }, 200)
                }
            })
        }
    }
</script>
<style>
    .loadmore .panel-body {
        padding: 2px;
    }
    
    .loadmore img {
        height: 16px;
        width: 16px;
    }
</style>